<template>
  <div>
    <div style="display:flex;margin-bottom:10px;line-height: 36px;">
      <span style="font-weight: normal;color: #131314;">同步应用</span>
      <el-select v-model="queryParamsApi.appId" placeholder="请选择" style="width: 200px;margin-left: 10px;"
                 @change="changeAppId">
        <el-option v-for="item in appList" :key="item.appId" :label="item.appName"
                   :value="item.appId" />
      </el-select>
    </div>
    <el-form ref="formRef" :model="form">
      <el-table
        ref="table"
        border
        max-height="490"
        highlight-current-row
        :header-cell-style="{ backgroundColor: '#f2f2f2'}"
        :data="form.apiList"
      >
        <template slot="empty">
          <p>{{ $store.getters.dataText }}</p>
        </template>
        <el-table-column
          fixed="left"
          type="index"
          label="序号"
          width="70"
        />
        <el-table-column key="name" label="接口名称" show-overflow-tooltip
                         align="center" prop="name" min-width="140px">
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="'apiList.' + scope.$index + '.name'"
              :rules="rules.name"
            >
              <el-input
                v-model.trim="scope.row.name"
                placeholder="请输入接口名称"
                size="small"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column key="url" label="接口URL" align="center"
                         prop="url" width="160px">
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="'apiList.' + scope.$index + '.url'"
              :rules="rules.url"
            >
              <el-input
                v-model.trim="scope.row.url"
                placeholder="请输入接口URL"
                size="small"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column key="dataType" label="推送信息" align="center"
                         prop="dataType" width="160px">
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="'apiList.' + scope.$index + '.dataType'"
              :rules="rules.dataType"
            >
              <el-select v-model="scope.row.dataType" placeholder="请选择推送信息">
                <el-option
                  v-for="dict in dict.type.dataType"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column key="operationType" label="推送类型" align="center"
                         prop="operationType" width="160px">
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="'apiList.' + scope.$index + '.operationType'"
              :rules="rules.operationType"
            >
              <el-select v-model.trim="scope.row.operationType" style="width:100%" placeholder="请选择推送类型">
                <el-option
                  v-for="dict in dict.type.operationType"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                />
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column key="remark" label="备注" align="center"
                         prop="remark" width="160px">
          <template slot-scope="scope">
            <el-form-item
              size="small"
              :prop="'apiList.' + scope.$index + '.remark'"
              :rules="rules.remark"
            >
              <el-input
                ref="input"
                v-model.trim="scope.row.remark"
                size="small"
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column :key="Math.random()" label="操作" align="center"
                         class-name="small-padding fixed-width" width="100">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="handleDeleteApi(scope.$index)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- <dt-table
      :table-opts="tableOptsApi"
      :is-show-column="false"
      :pagination-data="{
        total:totalApi,
        queryParams:queryParamsApi
      }"

      :is-column-search="false"
      @pagination="pagination"
    >

      <template v-slot:name="name">
        <el-input v-model="name.param.name" placeholder="请输入接口名称" />
      </template>
      <template v-slot:url="url">
        <el-input v-model="url.param.url" placeholder="请输入接口URL" />
      </template>
      <template v-slot:dataType="dataType">
        <el-select v-model="dataType.param.dataType" placeholder="请选择">
          <el-option
            v-for="dict in dict.type.dataType"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
          />
        </el-select>
      </template>
      <template v-slot:operationType="operationType">
        <el-select v-model.trim="operationType.param.operationType" style="width:100%" placeholder="请选择">
          <el-option
            v-for="dict in dict.type.operationType"
            :key="dict.value"
            :label="dict.label"
            :value="parseInt(dict.value)"
          />
        </el-select>
      </template>
      <template v-slot:remark="remark">
        <el-input v-model="remark.param.remark" placeholder="请输入备注" />
      </template>
    </dt-table> -->
    <div class="btn">
      <el-button @click="addData">添加</el-button>
    </div>
  </div>

</template>
<script>
import dataSynchronizationApi from '@/framework/api/datasync/dataSynchronization'

export default {
  dicts: ['dataType', 'operationType'],
  data() {
    return {
      tableOptsApi: {
        // configPagination: '1',
        // indexTableCol: {
        //   label: '序号',
        //   width: 70
        // },
        firstTableCol: {
          select: false
        },
        tableCol: [
          {
            prop: 'name',
            label: '接口名称',
            show: true,
            slotName: 'name'
          },
          {
            prop: 'url',
            label: '接口URL',
            show: true,
            slotName: 'url'
          },
          {
            prop: 'dataType',
            label: '推送信息',
            show: true,
            slotName: 'dataType'
          },
          {
            prop: 'operationType',
            label: '推送类型',
            show: true,
            slotName: 'operationType'
          }, {
            prop: 'remark',
            label: '备注',
            show: true,
            slotName: 'remark'
          }
        ],
        operator: {
          width: 100,
          operatorBtn: [
            {
              text: '删除',
              size: 'small',
              click: (row, col, cellValue) => {
                return this.handleDeleteApi(row, cellValue)
              }
            }
          ]
        },
        tableData: [
        ]
      },
      totalApi: 0,
      queryParams: {
        pageSize: 10,
        pageNo: 1,
        appName: ''
      },
      appList: [],
      queryParamsApi: {
        appId: ''
      },
      form: {
        apiList: [],
        appId: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入接口名称', trigger: 'change' }
        ],
        url: [
          { required: true, message: '请输入接口URL', trigger: 'change' }
        ],
        dataType: [
          { required: true, message: '请选择推送信息', trigger: 'change' }
        ],
        operationType: [
          { required: true, message: '请选择推送类型', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    pagination() {
      this.getApiList()
    },
    handleDeleteApi(index) {
      this.$dtModal.confirm('是否确认删除该条数据吗？').then(() => {
      }).then(() => {
        this.form.apiList.splice(index, 1)
      })
    },
    getApiList(queryParams) {
      let appId = ''
      if (queryParams) {
        appId = queryParams
      } else {
        appId = this.queryParamsApi.appId
      }
      dataSynchronizationApi.dataSyncAppApiList({ appId }).then((res) => {
        // this.tableOptsApi.tableData = res.data
        this.form.apiList = res.data
      })
    },
    getAppList() {
      dataSynchronizationApi.dataSyncApps().then((res) => {
        this.appList = res.data
        this.queryParamsApi.appId = this.appList[0].appId
      }).then(() => {
        this.getApiList()
      })
    },
    addData() {
      const obj = {
        name: '',
        url: '',
        dataType: '',
        operationType: '',
        remark: '',
        appId: this.queryParamsApi.appId
      }
      this.form.apiList.push(obj)
    },
    handleConfirm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.form.appId = this.queryParamsApi.appId
          dataSynchronizationApi.disposeApi(this.form).then((res) => {
            this.$dtMessage({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
            this.getApiList()
            this.$emit('closeDialig')
          })
        }
      })
    },
    changeAppId(val) {
      this.getApiList(val)
    }
  }
}
</script>
<style lang="scss" scoped>
 .btn{
  line-height: 56px;
  height: 56px;
  text-align: center;

  .el-button{
  // text-align: center;
    height: 30px;
    line-height: 30px;
    margin: auto;
      padding: 0 26px;
  }
}
</style>

